<template>
  <div class="status-bar">
    <div class="status-section game-time">
      <span class="status-icon">🕐</span>
      <span class="status-label">游戏时间:</span>
      <span class="status-value">{{ gameTimeFormatted }}</span>
    </div>
    
    <div class="status-section game-speed">
      <span class="status-icon">⚡</span>
      <span class="status-label">速度:</span>
      <span class="status-value">{{ gameSpeed }}x</span>
      <button 
        v-if="isPaused" 
        @click="resumeGame" 
        class="speed-btn paused"
        title="恢复游戏"
      >
        ▶️
      </button>
      <button 
        v-else 
        @click="pauseGame" 
        class="speed-btn"
        title="暂停游戏"
      >
        ⏸️
      </button>
    </div>
    
    <div class="status-section population">
      <span class="status-icon">👥</span>
      <span class="status-label">人口:</span>
      <span class="status-value">{{ formatNumber(totalPopulation) }}</span>
    </div>
    
    <div class="status-section fleet-power">
      <span class="status-icon">🚀</span>
      <span class="status-label">舰队力量:</span>
      <span class="status-value">{{ formatNumber(fleetPower) }}</span>
    </div>
    
    <div class="status-section research-progress" v-if="currentResearch">
      <span class="status-icon">🔬</span>
      <span class="status-label">研究:</span>
      <span class="status-value">{{ currentResearch.name }}</span>
      <div class="progress-bar">
        <div 
          class="progress-fill" 
          :style="{ width: `${currentResearch.progress}%` }"
        ></div>
      </div>
    </div>
    
    <div class="status-section notifications" v-if="unreadNotifications > 0">
      <button @click="openNotifications" class="notification-btn">
        <span class="status-icon">🔔</span>
        <span class="notification-count">{{ unreadNotifications }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useGameStore } from '@/stores/game'
import { useResourcesStore } from '@/stores/resources'
import { useTechnologyStore } from '@/stores/technology'
import { useShipsStore } from '@/stores/ships'
import { useNotificationStore } from '@/stores/notification'

const gameStore = useGameStore()
const resourcesStore = useResourcesStore()
const technologyStore = useTechnologyStore()
const shipsStore = useShipsStore()
const notificationStore = useNotificationStore()

// 计算属性
const gameTimeFormatted = computed(() => {
  const totalSeconds = gameStore.gameState.gameTime
  const hours = Math.floor(totalSeconds / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  return `${hours}h ${minutes}m`
})

const gameSpeed = computed(() => gameStore.gameState.speed)
const isPaused = computed(() => gameStore.gameState.isPaused)

const totalPopulation = computed(() => {
  try {
    // 检查资源存储是否已初始化
    if (!resourcesStore?.isInitialized) {
      return 0
    }
    
    // 检查方法是否存在
    if (typeof resourcesStore.getResourceAmount !== 'function') {
      console.warn('getResourceAmount method not available')
      return 0
    }
    
    return resourcesStore.getResourceAmount('population') || 0
  } catch (error) {
    console.warn('Error accessing totalPopulation:', error)
    return 0
  }
})

const fleetPower = computed(() => {
  return Object.values(shipsStore.fleets).reduce((total, fleet) => {
    return total + fleet.ships.reduce((fleetPower, ship) => {
      const shipData = shipsStore.ships[ship.shipId]
      return fleetPower + (shipData?.attributes.attack || 0) * ship.count
    }, 0)
  }, 0)
})

const currentResearch = computed(() => {
  const projects = Object.values(technologyStore.researchProjects)
  const active = projects.find(p => p.isActive)
  if (!active) return null
  
  return {
    name: active.name,
    progress: Math.round((active.progress / active.totalCost) * 100)
  }
})

const unreadNotifications = computed(() => {
  return notificationStore.notifications.filter(n => !n.isRead).length
})

// 方法
function pauseGame() {
  gameStore.pauseGame()
}

function resumeGame() {
  gameStore.resumeGame()
}

function openNotifications() {
  // 这里可以打开通知面板或模态框
  console.log('打开通知面板')
}

function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}
</script>

<style scoped>
.status-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  overflow-x: auto;
}

.status-section {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  min-width: fit-content;
}

.status-icon {
  font-size: 1rem;
}

.status-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.status-value {
  color: var(--text-primary);
  font-weight: 600;
}

.speed-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin-left: 0.25rem;
}

.speed-btn:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
}

.speed-btn.paused {
  color: var(--success-color);
}

.progress-bar {
  width: 60px;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.notification-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.notification-btn:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
}

.notification-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--error-color);
  color: white;
  font-size: 0.7rem;
  padding: 0.1rem 0.3rem;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .status-bar {
    gap: 1rem;
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  
  .status-section {
    gap: 0.2rem;
  }
  
  .status-label {
    display: none;
  }
  
  .progress-bar {
    width: 40px;
  }
}

@media (max-width: 480px) {
  .status-bar {
    gap: 0.5rem;
  }
  
  .status-section.population,
  .status-section.fleet-power {
    display: none;
  }
}
</style>